extends simplelayout
doctype html
block content

    html(lang='zh-CN')
        head
            meta(charset='utf-8')
            link(rel='icon', href='https://static.jianshukeji.com/highcharts/images/favicon.ico')
            meta(name="viewport" content="width=device-width, initial-scale=1")


    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap-glyphicons.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/styles.css')
    script(src='/javascripts/jquery-1.11.0.min.js')

    script(src='/javascripts/highcharts.js')
    script(src='/javascripts/highcharts-more.js')
    script(src='/javascripts/xrange.js')
    script(src='/javascripts/exporting.js')
    script(src='/javascripts/series-label.js')
        
    link(rel='shortcut icon', href='http://static.tmimgcdn.com/img/favicon.ico')
    link(rel='icon', href='http://static.tmimgcdn.com/img/favicon.ico')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/bootstrap-glyphicons.css')
    link(rel='stylesheet', type='text/css', media='all', href='/stylesheets/styles.css')


    div(style="width: 1000px; margin: 50px 200px;")

        ul(id="position")

    body
        div(style='height:800px;min-width: 300px;max-width: 1500px;margin: 1em auto;', id="timechart4")


    script(type='text/javascript').
        function search_graph_emrsymptom(Term4) {
            $.ajax({
                url: "/search/graph_emrsymptom/list",
                type: "POST",
                data: {term: Term4},
                
                success: function (data) {
                    var symcategory = [];
                    var symcategory_p = [];
                    var symcategory_n = [];
                    var symresult = [];
                    var obj = {};
                    var arrData_p = [];
                    var arrData_n = [];
                    var starttime = [];
                    var starttime_p = [];
                    var starttime_n = [];
                    var attribute = [];
                    var attribute_p = [];
                    var attribute_n = [];

                    if (data == '') {
                        alert("No or lack of relevant data!" + "\n" + "Click to close the message box.");
                    } else {
                        ////////EMR SYMPTOM DATA/////////
                        var c = 0;
                        for (var q = 0; q < data.length; q++) {
                            symcategory[c] = [data[q].SYMPTOM_NAME_EN];
                            starttime[c] = [data[q].RECORD_TIME];
                            attribute[c] = [data[q].SYMPTOM_ATTRIBUTE];
                            c++;
                        }
                        for (var i = 0; i < data.length; i++) {
                            if (!obj[symcategory[i]]) {
                                symresult.push(symcategory[i]);
                                obj[symcategory[i]] = true;
                            }
                        }
                        symresult.sort(); //Display symptom names in alphabetical order from top to bottom

                        var index_p = 0
                        var index_n = 0
                        for (var m = 0; m < c; m++) {
                            if (attribute[m][0].indexOf('+') == 0) {
                                symcategory_p[index_p] = symcategory[m];
                                starttime_p[index_p] = starttime[m];
                                attribute_p[index_p] = attribute[m];
                                index_p++;
                            } else {
                                symcategory_n[index_n] = symcategory[m];
                                starttime_n[index_n] = starttime[m];
                                attribute_n[index_n] = attribute[m];
                                index_n++;
                            }
                        }

                        for (var r = 0; r < index_p; r++) {
                            for (var u = symcategory_p.length - 1; u >= 0; u--) {
                                if (symcategory_p[r][0] == symcategory_p[u][0]) break;
                            }
                            arrData_p[r] = {
                                x: Date.UTC(chGMT(starttime_p[r][0]).slice(0, 4), chGMT(starttime_p[r][0]).slice(5, 7) - 1, chGMT(starttime_p[r][0]).slice(8, 10), chGMT(starttime_p[r][0]).slice(11, 13), chGMT(starttime_p[r][0]).slice(14, 16), chGMT(starttime_p[r][0]).slice(17, 19)),
                                x2: Date.UTC(chGMT(starttime_p[u][0]).slice(0, 4), chGMT(starttime_p[u][0]).slice(5, 7) - 1, chGMT(starttime_p[u][0]).slice(8, 10), chGMT(starttime_p[u][0]).slice(11, 13), chGMT(starttime_p[u][0]).slice(14, 16), chGMT(starttime_p[u][0]).slice(17, 19)),
                                y: in_array(symcategory_p[r], symresult),
                                sym: symcategory_p[r][0],
                                attribute: attribute_p[r],
                                color: '#ffc1c1'
                            }
                        }
                        for (var r = 0; r < index_n; r++) {
                            for (var v = symcategory_n.length - 1; v >= 0; v--) {
                                if (symcategory_n[r][0] == symcategory_n[v][0]) break;
                            }
                            arrData_n[r] = {
                                x: Date.UTC(chGMT(starttime_n[r][0]).slice(0, 4), chGMT(starttime_n[r][0]).slice(5, 7) - 1, chGMT(starttime_n[r][0]).slice(8, 10), chGMT(starttime_n[r][0]).slice(11, 13), chGMT(starttime_n[r][0]).slice(14, 16), chGMT(starttime_n[r][0]).slice(17, 19)),
                                x2: Date.UTC(chGMT(starttime_n[v][0]).slice(0, 4), chGMT(starttime_n[v][0]).slice(5, 7) - 1, chGMT(starttime_n[v][0]).slice(8, 10), chGMT(starttime_n[v][0]).slice(11, 13), chGMT(starttime_n[v][0]).slice(14, 16), chGMT(starttime_n[v][0]).slice(17, 19)),
                                y: in_array(symcategory_n[r], symresult),
                                sym: symcategory_n[r][0],
                                attribute: attribute_n[r],
                                color: '#b1a8ad'
                            }
                        }


                        $(function () {
                            function syncExtremes(e) {
                                var thisChart = this.chart;
                                if (e.trigger !== 'syncExtremes') {
                                    Highcharts.each(Highcharts.charts, function (chart) {
                                        if (chart !== thisChart) {
                                            if (chart.xAxis[0].setExtremes) {
                                                chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {trigger: 'syncExtremes'});
                                            }
                                        }
                                    });
                                }
                            }
                            
                            Highcharts.chart('timechart4', {
                                chart: {
                                    type: 'xrange',
                                    marginLeft: 150,
                                    zoomType: 'xy',
                                    panning: true,
                                    panKey: 'ctrl'
                                },
                                title: {
                                    text: 'EMR SYMPTOM-HADMID: ' + Term4 + ' EMRID: ' + data[0].EMR_ID
                                },
                                subtitle: {
                                    text: 'Drag to select the zoom area; Press ctrl to pan the chart left or right; Click on the legend to hide or resume display.'
                                },
                                xAxis: {
                                    type: 'datetime',
                                    events: {
                                        setExtremes: syncExtremes
                                    },
                                    title: {
                                        text: 'Time In Hospital'
                                    }
                                },
                                yAxis: [{
                                    title: {
                                        text: ''
                                    },
                                    categories: symresult,
                                    reversed: true,
                                    tickInterval: 1
                                }],

                                tooltip: {
                                    headerFormat: '<b>Record Time:</b>{point.x:%A,%b.%e,%Y,%H:%M:%S}<br>',
                                    pointFormat: '<b>Symptom Name:</b>{point.sym}<br><b>Attribute:</b>{point.attribute}<br>',
                                    positioner: function () {//固定标签显示位置
                                        return {x: this.chart.chartWidth - this.label.width - 1, y: 0};
                                    },
                                    crosshairs: [{
                                        width: 1,
                                        color: "#006cee",
                                        dashStyle: 'longdashdot'

                                    }, {
                                        width: 1,
                                        color: "#006cee",
                                        dashStyle: 'longdashdot'
                                    }]

                                },
                                legend: {
                                    layout: 'vertical',
                                    align: 'right',
                                    verticalAlign: 'middle'

                                },
                                series: [{
                                    name: 'Symptoms+',
                                    dashStyle: 'solid',
                                    pointWidth: 2,
                                    data: arrData_p,
                                    color: '#ffc1c1',
                                    dataLabels: {
                                        enabled: true,
                                        defer: false,
                                        inside: true,
                                        align: 'center'
                                    }
                                },
                                    {
                                        name: 'Symptoms-',
                                        dashStyle: 'solid',
                                        pointWidth: 2,
                                        data: arrData_n,
                                        color: '#b1a8ad',
                                        dataLabels: {
                                            enabled: true,
                                            defer: false,
                                            inside: true,
                                            align: 'center'
                                        }
                                    }]
                            });
                        });
                    }
                }
            })
        }
        

        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, //month
                "d+": this.getDate(), //day
                "h+": this.getHours(), //hour
                "m+": this.getMinutes(), //minute
                "s+": this.getSeconds(), //second
                "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
                "S": this.getMilliseconds() //millisecond
            }
            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            return format;
        }

        function chGMT(gmtDate) {
            return gmtDate;
        }
        function in_array(searchString, array) {
            for (var i = 0; i < array.length; i++) {
                if (searchString == array[i][0]) return i;
            }
        }
        (function (H) {
            H.Legend.prototype.getAllItems = function () {
                var allItems = [];
                len = this.chart.series.length;
                H.each(this.chart.series, function (series) {
                    if (series == undefined) ;
                    else {
                        var seriesOptions = series && series.options;
                        if (series.name === 'Symptoms+' || series.name === 'Symptoms-') {
                            series.color = series.userOptions.color
                        }
                        if (series && H.pick(
                            seriesOptions.showInLegend,
                            !H.defined(seriesOptions.linkedTo) ? undefined : false, true
                        )) {
                            allItems = allItems.concat(
                                series.legendItems ||
                                (
                                    seriesOptions.legendType === 'point' ?
                                        series.data :
                                        series
                                )
                            );
                        }
                    }

                });

                H.fireEvent(this, 'afterGetAllItems', {allItems: allItems});
                return allItems;
            }
        })(Highcharts)


        window.onload = function () {

            search_graph_emrsymptom();


        }
